<template>
  <!-- 个人资料 -->
  <div>
    <!-- 头像资料 -->
    <div class="top">
      <div class="head-portrait">
        <img
          v-if="userPicture.picture != ''"
          :src="userPicture.picture"
          alt="用户头像"
        />
        <img v-else src="../../assets/头像.jpg" alt="" />
        <div class="head-portrait-mask" @click="modifyHeadPortrait">
          <i class="bi bi-camera"></i>
        </div>
      </div>

      <div class="head-portrait-modify" v-show="userPortrait.isEdit">
        <h4>上传头像</h4>
        <hr />
        <input type="file" ref="headPortrait" />

        <button type="submit" @click="submitPortrait">确认上传</button>
        <button type="reset" @click="resetPortrait">取消上传</button>
      </div>

      <div class="nick-name">“ {{ userName.name }} ”</div>
    </div>
    <!-- 基本资料 -->
    <div class="BasicInformation">
      <h4>基本资料</h4>
      <el-button round class="edit-data" @click="editData" v-if="showData"
        >编辑资料</el-button
      >
      <el-button round class="edit-data" @click="submitData" v-else
        >编辑完成</el-button
      >
      <hr />
      <ul>
        <!-- 用户姓名 -->
        <li>
          <p class="user-data">用户昵称</p>
          <div class="user-content">
            <!-- 修改框 -->
            <div v-show="userName.isEdit" class="edit-Info">
              <input type="text" ref="editUname" v-on:input="changeUname" />
              <div v-if="userName.error" class="prompt">
                用户昵称长度不超过10个字符,且不可以存在空格！
              </div>
            </div>

            <div class="show-Info" v-show="userName.isShow">
              <p ref="show_uname">{{ userName.name }}</p>
            </div>
          </div>
        </li>
        <!-- 用户ID -->
        <li>
          <p class="user-data">用户&nbsp; ID</p>
          <div class="user-content">
            <p>{{ userID.id }}</p>
            <span class="tips" v-show="userID.isEdit"> ( 此项不可修改 )</span>
          </div>
        </li>
        <!-- 用户性别 -->
        <li>
          <p class="user-data">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</p>
          <div class="user-content">
            <!-- 修改样式 -->
            <div v-show="userSex.isEdit" class="edit-Info">
              <select name="user_sex" id="user_sex" ref="user_sex">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <!-- 展示样式 -->
            <div class="show-Info" v-show="userSex.isShow">
              <p>{{ userSex.sex }}</p>
            </div>
          </div>
        </li>
        <!-- 个人简介 -->
        <li ref="introduce" id="introduce">
          <p class="user-data">个人简介</p>
          <div class="user-content">
            <!-- 修改框 -->
            <div class="edit-Info" v-show="userIntroduce.isEdit">
              <textarea
                name=""
                id=""
                v-on:input="changeIntroduce"
                ref="edit_introduce"
              >
              </textarea>
              <div v-if="userIntroduce.error" class="prompt">
                用户个人简介长度不超过240个字符！
              </div>
            </div>
            <!-- 文本文字 -->
            <div class="show-Info" v-show="userIntroduce.isShow">
              <p>{{ userIntroduce.introduce }}</p>
            </div>
          </div>
        </li>
        <!-- 所在地区 -->
        <li>
          <p class="user-data">所在地区</p>
          <div class="user-content">
            <div class="edit-Info" v-show="userArea.isEdit">
              <v-distpicker
                @province="onChangeProvince"
                @city="onChangeCity"
                @area="onChangeArea"
                :province="userArea.province"
                :city="userArea.city"
                :area="userArea.area"
              ></v-distpicker>
            </div>
            <!-- 文本文字 -->
            <div
              class="show-Info"
              v-show="userArea.isShow"
              v-if="userArea.province"
            >
              {{ userArea.province }} — {{ userArea.city }} —
              {{ userArea.area }}
            </div>
            <div v-else v-show="userArea.isShow">暂无</div>
          </div>
        </li>
        <!-- 出生日期 -->
        <li>
          <p class="user-data">出生日期</p>
          <div class="user-content">
            <div class="edit-Info" v-show="userBirthday.isEdit">
              <el-date-picker
                v-model="userBirthday.birthday"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
            <!-- 文本文字 -->
            <div class="show-Info" v-show="userBirthday.isShow">
              {{ userBirthday.birthday }}
            </div>
          </div>
        </li>
        <!-- 专业 -->
        <li>
          <p class="user-data">
            专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;业
          </p>
          <div class="user-content">
            <!-- 修改样式 -->
            <div v-show="userProfessional.isEdit" class="edit-Info">
              <select
                name="user_professional"
                id="user_professional"
                ref="user_professional"
              >
                <option value="前端">前端</option>
                <option value="后端">后端</option>
                <option value="大数据">大数据</option>
              </select>
            </div>
            <!-- 展示样式 -->
            <div class="show-Info" v-show="userProfessional.isShow">
              <p>{{ userProfessional.professional }}</p>
            </div>
          </div>
        </li>
        <!-- 学期期制 -->
        <li>
          <p class="user-data">学期期制</p>

          <div class="user-content">
            <p v-if="userSemester.area">
              {{ userSemester.area }} — {{ userSemester.semester }}
            </p>
            <p v-else>暂无</p>
            <span class="tips" v-show="userSemester.isEdit">
              ( 此项不可修改 )</span
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//引入混入
import { mixin } from "../../mixin";
//引入地区相关组件
import VDistpicker from "v-distpicker";
export default {
  components: {
    "v-distpicker": VDistpicker,
  },
  name: "PersonalData",
  data() {
    return {
      //是否编辑资料
      showData: true,
      //用户头像编辑相关资料
      userPortrait: {
        isEdit: false,
      },
      //用户姓名及其相关数据
      userName: {
        name: "", //用户姓名
        isEdit: false, //是否修改用户姓名
        isShow: true, //是否展示用户姓名
        error: false, //用户名输入不正确
      },
      //用户ID及其相关数据
      userID: {
        id: this.$store.getters.getLoginxId,
        isEdit: false,
      },
      //用户性sex 及其相关数据
      userSex: {
        sex: "",
        isEdit: false, //修改
        isShow: true, //展示
      },
      //用户Introduce 及其相关数据
      userIntroduce: {
        introduce: "",
        isEdit: false,
        isShow: true,
        error: false,
      },
      //用户Area 及其相关数据
      userArea: {
        isEdit: false,
        isShow: true,
        province: "",
        city: "",
        area: "",
      },
      //用户出生日期相关数据
      userBirthday: {
        isEdit: false,
        isShow: true,
        birthday: "",
      },
      //用户专业相关数据
      userProfessional: {
        isEdit: false,
        isShow: true,
        professional: "",
      },
      //用户学期期制
      userSemester: {
        isEdit: false,
        area: "",
        semester: "",
      },
      //用户头像
      userPicture: {
        picture: "",
      },
    };
  },
  //混入，引入时间戳处理函数
  mixins: [mixin],
  methods: {
    splitArea(str) {
      if (str) {
        let arr = str.split("—");
        this.userArea.province = arr[0];
        this.userArea.city = arr[1];
        this.userArea.area = arr[2];
      }
    },
    splitSemster(str) {
      if (str) {
        let arr = str.split("—");
        this.userSemester.semester = arr[1];
        this.userSemester.area = arr[0];
      }
    },
    /*************编辑资料***********/
    editData() {
      //展示用户昵称编辑页面
      this.userName.isEdit = true;
      this.userName.isShow = false;
      this.$refs.editUname.value = this.$refs.show_uname.innerText;
      //展示用户id的提示信息
      this.userID.isEdit = true;
      //展示用户性别编辑页面
      this.$refs.user_sex.value = this.userSex.sex;
      this.userSex.isEdit = true;
      this.userSex.isShow = false;
      //展示用户个人简介编辑页面
      this.$refs.introduce.style.height = "150px ";
      this.userIntroduce.isEdit = true;
      this.userIntroduce.isShow = false;
      this.$refs.edit_introduce.value = this.userIntroduce.introduce;
      //展示用户所在地区编辑页面
      this.userArea.isEdit = true;
      this.userArea.isShow = false;
      //展示用户出生日期编辑页面
      this.userBirthday.isEdit = true;
      this.userBirthday.isShow = false;
      //展示用户专业编辑页面
      this.$refs.user_professional.value = this.userProfessional.professional;
      this.userProfessional.isEdit = true;
      this.userProfessional.isShow = false;
      //展示用户学期学制的提示信息
      this.userSemester.isEdit = true;
      //展示编辑完成按钮
      this.showData = false;
    },
    /*************编辑完成***********/
    submitData() {
      //展示修改资料按钮
      this.showData = true;
      //用户昵称修改
      this.userName.isEdit = false;
      this.userName.isShow = true;
      this.userName.name = this.$refs.editUname.value;
      //展示用户id的提示信息
      this.userID.isEdit = false;
      //用户性别修改
      const sex = this.$refs.user_sex.value;
      this.userSex.sex = sex;
      this.userSex.isEdit = false;
      this.userSex.isShow = true;
      //个人简介修改
      this.userIntroduce.introduce = this.$refs.edit_introduce.value;
      this.userIntroduce.isEdit = false;
      this.userIntroduce.isShow = true;
      this.$refs.introduce.style.height = "50px ";
      //所在地区修改
      this.userArea.isEdit = false;
      this.userArea.isShow = true;
      //出生日期
      this.userBirthday.isEdit = false;
      this.userBirthday.isShow = true;
      //用户专业修改
      const professional = this.$refs.user_professional.value;
      this.userProfessional.professional = professional;
      this.userProfessional.isEdit = false;
      this.userProfessional.isShow = true;
      //不展示用户学期学制的提示信息
      this.userSemester.isEdit = false;
      if (!this.userBirthday.birthday) {
        this.userBirthday.birthday = "1970-01-01";
      }
      this.$http({
        method: "post",
        url: `user/editPersonalInformation?birthday=${this.userBirthday.birthday}`,
        headers: {
          "Content-Type":"application/json;charset=UTF-8",
        },
        data: JSON.stringify({
          uid: this.userID.id,
          username: this.userName.name,
          sex: this.userSex.sex,
          biography: this.userIntroduce.introduce,
          address: `${this.userArea.province}—${this.userArea.city}—${this.userArea.area}`,
          specialized: this.userProfessional.professional,
        }),
      }).then(({ data }) => {
        if (data.flag) {
          // 名称
          console.log(data);
          this.$store.commit("Loginx", {
            UserName: this.userName.name,
          });
          this.$store.commit("LoginxToken", {
            token: data.data.token,
          });
          this.$store.commit("LoginxMessage", {
            message: data.data.user,
          });
          this.$message.success("修改资料成功!");
        } else {
          this.$message.info("修改资料失败!");
        }
      });
    },
    /*************地区选择方法********/
    onChangeProvince(province) {
      this.userArea.province = province.value;
    },
    onChangeCity(city) {
      this.userArea.city = city.value;
    },
    onChangeArea(area) {
      this.userArea.area = area.value;
    },
    /*************日期选择方法********/
    //设置当前日期之后不能选中
    disabledDate(date) {
      if (date.getTime() > new Date().getTime()) {
        return true;
      }
    },
    //uname 发生修改时触发
    changeUname() {
      const a = this.$refs.editUname.value.trim().length;
      const b = this.$refs.editUname.value.length;
      if (this.$refs.editUname.value.length > 10 || a != b) {
        this.userName.error = true;
      } else {
        this.userName.error = false;
      }
    },
    //个人简介框 改变事件
    changeIntroduce() {
      const a = this.$refs.edit_introduce.value.length;
      if (a > 240) {
        this.userIntroduce.error = true;
      } else {
        this.userIntroduce.error = false;
      }
    },
    //修改头像
    modifyHeadPortrait() {
      this.userPortrait.isEdit = true;
    },
    //确认上传
    submitPortrait() {
      let picture = this.$refs.headPortrait.files[0];
      if (picture) {
        var formData = new FormData();
        formData.append("newFile", picture);
        if (picture.size < 4200000) {
          this.$http({
            method: "post",
            url: `user/editPicture`,
            headers: {
              "Content-Type": "multipart/form-data",
            },
            data: formData,
          }).then(({ data }) => {
            if (data.flag) {
              //头像地址
              this.$store.commit("LoginPicture", {
                picture: data.data,
              });
              this.pageLoad();
              this.$bus.$emit("picture", data.data);
              this.$message.success("修改头像成功!");
            } else {
              this.$message.info("修改头像失败!");
            }
          });
          this.userPortrait.isEdit = false;
        } else {
          this.$message.warning("图片最大限制为4M！请重新上传！");
        }
      } else {
        this.$message.warning("请选择想要上传的头像！");
      }
    },
    //取消上传
    resetPortrait() {
      this.userPortrait.isEdit = false;
    },
    //页面加载
    pageLoad() {
      let userData = JSON.parse(sessionStorage.getItem("LoginMessage")).message;
      this.userName.name = userData.username;
      this.userSex.sex = userData.sex;
      this.userIntroduce.introduce = userData.biography;
      this.userBirthday.birthday = this.timeDetal(userData.birthday);
      this.userProfessional.professional = userData.specialized;
      this.userID.id = userData.uid;
      this.splitArea(userData.address);
      this.splitSemster(userData.semester);
      let userPicture = JSON.parse(
        sessionStorage.getItem("userPicture")
      ).picture;
      if (userPicture) {
        this.userPicture.picture =
          "http://" + JSON.parse(sessionStorage.getItem("userPicture")).picture;
      }
    },
  },
  mounted() {
    this.pageLoad();
  },
};
</script>

<style lang="less" scoped>
//头部框
.top {
  width: 100%;
  height: 215px;
  // background-color: rgba(135, 206, 235, 0.2);
  padding-top: 30px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 10px 0px #dbdada;
  background-color: #fff;
  //头像
  .head-portrait {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    position: absolute;
    overflow: hidden;
    &:hover {
      .head-portrait-mask {
        display: block;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
    .head-portrait-mask {
      display: none;
      width: 100%;
      height: 100%;
      background-color: black;
      opacity: 0.3;
      position: absolute;
      z-index: 99;
      top: 0px;
      left: 0px;
      .bi-camera {
        font-size: 50px;
        color: #ccc;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
      }
    }
  }
  //昵称
  .nick-name {
    left: 50%;
    top: 80%;
    transform: translate(-50%, -50%);
    position: absolute;
    // margin-top: 15px;
    font-size: 20px;
  }
  .head-portrait-modify {
    width: 350px;
    height: 200px;
    position: absolute;
    background-color: #fff;
    text-align: center;
    border-radius: 5px;
    border: 2px solid #ccc;
    overflow: hidden;
    top: 50%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
    h4 {
      margin: 10px 0px;
    }
    //头像上传
    input {
      margin-top: 30px;
      margin-left: 85px;
    }
    button {
      padding: 3px 15px;
      margin-top: 40px;
      margin-right: 15px;
      margin-left: 5px;
    }
  }
}
#introduce {
  .SubmitInfo {
    margin-left: 200px;
  }
}
//基本资料相关样式
.BasicInformation {
  border-radius: 10px;
  width: 100%;
  // height: 60px;
  // background-color: rgba(135, 206, 235, 0.2);
  margin-top: 20px;
  box-shadow: 0 0 10px 0px #dbdada;
  background-color: #fff;
  padding: 10px 0px;
  box-sizing: border-box;
  position: relative;
  color: #6d6d6d;
  .tips {
    display: inline-block;
    margin-left: 20px;
    font-size: 14px;
    color: rgb(92, 90, 90);
  }
  h4 {
    margin: 10px 20px;
  }
  hr {
    background-color: #fff;
  }
  ul {
    margin: 10px 20px;
    width: 100%;
    min-height: 450px;
    li {
      width: 100%;
      // height: 50px;
      margin: 10px 0px;
      min-height: 50px;
      .user-data {
        margin-top: 15px;
        margin-left: 20px;
        width: 120px;
        float: left;
      }
      .user-content {
        // position: absolute;
        margin-top: 15px;
        margin-left: 20px;
        width: 800px;
        // height: 30px;
        float: left;
        .show-Info {
          width: 600px;
          // height: 30px;
          float: left;
          .edit {
            margin-top: 8px;
            margin-left: 10px;
            font-size: 13px;
            display: none;
            opacity: 0.5;
            cursor: pointer;
            float: left;
          }
          &:hover {
            .edit {
              display: block;
              float: left;
            }
          }
        }

        p {
          float: left;
          // width: 200px;
        }
        .edit-Info {
          input {
            border-style: none;
            width: 200px;
            height: 35px;
            border-radius: 5px;
            padding-left: 10px;
            font-size: 16px;
            color: rgb(87, 86, 86);
            border: 2px solid #ccc;
            float: left;
            &:focus {
              outline: none !important;
              list-style: none;
            }
          }
          textarea {
            resize: none;
            width: 600px;
            height: 100px;
            list-style: none;
            border: 2px solid #ccc;
            padding: 10px;
            font-size: 16px;
            overflow: none;
            background-color: #fff;
            border-radius: 10px;
            color: rgb(87, 86, 86);

            &:focus {
              outline: none !important;
              list-style: none;
            }
          }

          .SubmitInfo,
          .CancelInfo {
            text-align: center;
            float: left;
            margin-left: 30px;
            width: 50px;
            line-height: 25px;
            height: 25px;
            border-radius: 5px;
            margin-top: 5px;
            background-color: #fff;
            color: skyblue;
            border-color: #fff;
            cursor: pointer;
            &:hover {
              background-color: rgb(20, 104, 110);
              color: #fff;
            }
          }
          .prompt {
            margin-top: 5px;
            margin-left: 20px;
            color: #fc0a0a;
            float: left;
          }
          select {
            float: left;
            width: 200px;
            height: 40px;
            font-size: 16px;
            padding-left: 10px;
            border: 2px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
            color: rgb(87, 86, 86);
            &:focus {
              outline: none !important;
            }
            option {
              border: 2px solid #ccc;
            }
          }
        }
      }
    }
  }
  .edit-data {
    width: 100px;
    height: 30px;
    border-radius: 15px;
    line-height: 5px;
    text-align: center;
    position: absolute;
    top: 13px;
    right: 50px;
    cursor: pointer;
  }
}
//修改地区选择框样式
.distpicker-address-wrapper {
  select {
    padding: 0px 10px !important;
    height: 30px !important;
    font-size: 15px !important;
    line-height: 30px !important;
  }
}
</style>

